<template>
  <cu-custom bg-color="bg-gradual-blue" is-back>
    <template #backText>返回</template>
    <template #content>简历列表</template>
  </cu-custom>
  <view class="container">
    <view
      class="cu-list menu padding-sm border-radius {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}"
    >
      <view
        v-for="(item, index) in noteList"
        :key="index"
        class="cu-item border-radius note-item margin-bottom"
      >
        <view>
          <view v-if="item.status" class="is-active">正在使用</view>

          <view class="content">
            <view class="w-100">
              <view class="flex padding-xs shadow-warp">
                <img :src="item.cateObj?.typeImage" class="image" />
              </view>
              <view class="margin-left">
                <view class="text-grey">{{ item.noteName }}</view>
                <view class="flex justify-around">
                  <button class="cu-btn shadow" @click="handleCopy(item)">
                    复制简历
                  </button>
                  <button
                    class="cu-btn bg-gradual-blue shadow margin-left"
                    @click="setActive(item)"
                  >
                    编辑简历
                  </button>
                </view>
              </view>
            </view>
            <uni-icons
              type="settings"
              class="edit"
              size="30"
              @click="editNote(index)"
            ></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>

  <uni-popup ref="popup" type="bottom">
    <view class="bg-white popup-content flex">
      <view class="flex flex-direction margin-right" @click="changeName">
        <uni-icons type="compose" size="30"></uni-icons>
        <view>修改简历名称</view>
      </view>
      <view class="flex flex-direction" @click="delNote">
        <uni-icons type="trash-filled" size="30"></uni-icons>
        <view>删除简历</view>
      </view>
    </view>
    <view class="bg-white margin-top text-center lh-60" @click="cancle">
      取消
    </view>
  </uni-popup>

  <uni-popup ref="delPopup" type="bottom">
    <view class="bg-white popup-content">
      <view class="text-center">删除当前简历后数据不可恢复</view>
      <view class="bg-white margin-top text-red text-center lh-60" @click="del">
        删除
      </view>
    </view>
    <view class="bg-white margin-top text-center lh-60" @click="cancle">
      取消
    </view>
  </uni-popup>

  <uni-popup ref="updateName" type="center">
    <view class="bg-white updateName-box">
      <view>修改简历名称</view>
      <uni-easyinput
        v-model="name"
        class="margin-tb-sm"
        focus
        placeholder="请输入内容"
      ></uni-easyinput>
      <view class="flex justify-end">
        <button class="cu-btn bg-blue margin-tb-sm lg" @click="setName">
          保存
        </button>
        <button class="cu-btn margin-left margin-tb-sm lg" @click="cancle">
          取消
        </button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import {
  getNoteList,
  setNoteName,
  delNote as delnote,
  toCopyNote,
  setCurrentNote,
} from "@/api/index";
import { ref } from "vue";
let noteList: any = ref(null);
const name = ref("");

const popup: any = ref(null);
const delPopup: any = ref(null);
const updateName: any = ref(null);

let currentObj: any = {};
//获取简历列表
const getList = async () => {
  let data: any = await getNoteList();
  console.log(data, "ddd999");

  noteList.value = data.data;
};
getList();
//编辑简历弹窗
const editNote = (index: number) => {
  currentObj = noteList.value[index];

  console.log(index, "index");
  popup.value.open();
};
//修改简历名称弹窗
const changeName = () => {
  updateName.value.open();
};
//取消
const cancle = () => {
  popup.value.close();
};
//设置简历名称
const setName = async () => {
  uni.showLoading({
    title: "修改中",
  });
  let data: any = await setNoteName({ id: currentObj._id, name: name.value });
  if (data.data) {
    updateName.value.close();
    uni.hideLoading();
    cancle();
    getList();
  }
  console.log(data, "data");
};
//删除简历
const delNote = () => {
  cancle();
  delPopup.value.open();
};
const del = async () => {
  let data: any = await delnote({ id: currentObj._id });
  if (data.data) {
    delPopup.value.close();
    getList();
  }
};
const handleCopy = async (item: any) => {
  let data: any = await toCopyNote(item);
  if (data.data) {
    getList();
  }
};

const setActive = async (item: any) => {
  let data: any = await setCurrentNote({ id: item._id });
  if (data.data) {
    uni.switchTab({
      url: "/pages/index/index?isUpdate=true",
    });
  }
};
</script>

<style scoped lang="scss">
.lh-60 {
  line-height: 60rpx;
}
.popup-content {
  border-top-right-radius: 10rpx;
  border-top-left-radius: 10rpx;
  padding: 15rpx;
}
.updateName-box {
  width: 730rpx;
  border-radius: 10rpx;
  background-color: white;
  padding: 15rpx;
}
.image {
  width: 160rpx;
  height: 220rpx;
}
.w-100 {
  width: 100%;
}
.border-radius {
  border-radius: 15rpx;
}
.note-item {
  position: relative;
  padding: 10rpx !important;
}
.is-active {
  position: relative;
  width: 120rpx;
  top: -10rpx;
  left: -10rpx;
  font-size: 12px;
  color: white;
  text-align: center;
  border-top-left-radius: 15rpx;
  border-bottom-right-radius: 15rpx;
  background-color: rgb(0, 211, 175);
}
.edit {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
}
</style>
